<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>First steps in GTK#</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK#, first steps, C#, programming, linux">
<meta name="description" content="In this part of the GTK# programming tutorial, 
we will do our first steps in programming.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>First steps in GTK#</h1>

<p>
In this part of the GTK# programming tutorial, we will do our first steps in programming.
We will create simple programs. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<h2>Simple example</h2>

<p>
The first code example is a simple one that shows a centered window.  
</p>

<div class="codehead">center.cs</div> 
<pre class="code">
using Gtk;
 
class SharpApp : Window {
 
    public SharpApp() : base("Center")
    {
        SetDefaultSize(250, 200);
        SetPosition(WindowPosition.Center);
        
        DeleteEvent += delegate { Application.Quit(); };
        
        Show();    
    }
    
    public static void Main()
    {
        Application.Init();
        new SharpApp();        
        Application.Run();
    }
}
</pre>

<p>
The code example shows a small window in the center of the screen. 
</p>

<pre>
$ gmcs -pkg:gtk-sharp-2.0 center.cs
</pre>

<p>
Here is how we compile the code example.
</p>

<pre class="explanation">
using Gtk;
</pre>

<p>
Now we can use the objects from the <code>Gtk</code> namespace directly. We can write 
<code>Window</code> instead of <code>Gtk.Window</code>. 
</p>

<pre class="explanation">
class SharpApp : Window {
</pre>

<p>
Our application is based on the <code>SharpApp</code> class. This class inherits from 
the <code>Window</code> class. 
</p>

<pre class="explanation">
public SharpApp() : base("Center")
{
    ...   
}
</pre>

<p>
This is the constructor. It builds our application. It also calls
it's parent constructor through the <code>base()</code> keyword.
</p>

<pre class="explanation">
SetDefaultSize(250, 200);
</pre>

<p>
This line sets a default size for our window. 
</p>

<pre class="explanation">
SetPosition(WindowPosition.Center);
</pre>

<p>
This line centers the window on the screen. 
</p>

<pre class="explanation">
 DeleteEvent += delegate { Application.Quit(); };
</pre>

<p>
We plug a delegate to the <code>DeleteEvent</code>. This
event is triggered, when we click on the close button in the titlebar. 
Or press Alt + F4. Our delegate quits the application for good. 
</p>

<pre class="explanation">
Show();
</pre>

<p>
Now we show the window. The window is not visible, until we call the 
<code>Show()</code> method. 
</p>

<pre class="explanation">
public static void Main()
{
    Application.Init();
    new SharpApp();        
    Application.Run();
}
</pre>

<p>
The <code>Main()</code> method is the entry point to the 
application. It initiates and runs the program. 
</p>


<h2>Icon</h2>

<p>
In the next example, we show the application icon. Most window managers display the icon 
in the left corner of the titlebar and also on the taskbar.
</p>

<div class="codehead">icon.cs</div>
<pre class="code"> 
using Gtk;
using System;
 
class SharpApp : Window {
 
    public SharpApp() : base("Icon")
    {
        SetDefaultSize(250, 160);
        SetPosition(WindowPosition.Center);
        SetIconFromFile("web.png");
        
        DeleteEvent += new DeleteEventHandler(OnDelete);
        
        Show();      
    }
    
    public static void Main()
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }

    void OnDelete(object obj, DeleteEventArgs args)
    {
        Application.Quit();
    }
}
</pre>

<p>
The code example shows the application icon. 
</p>

<pre class="explanation">
SetIconFromFile("web.png");
</pre>

<p>
The <code>SetIconFromFile()</code> method sets an icon for the window.
The image is loaded from disk in the current working directory. 
</p>

<pre class="explanation">
DeleteEvent += new DeleteEventHandler(OnDelete);
</pre>

<p>
This is another way, how we can plug an event handler to an event. 
It is just a bit more verbose.
</p>

<pre class="explanation">
void OnDelete(object obj, DeleteEventArgs args)
{
    Application.Quit();
}
</pre>

<p>
This is an event handler for the delete event. 
</p>

<img src="/img/gui/sharpgtk/icon.png" alt="Icon">
<div class="figure">Figure: Icon</div>



<h2>Buttons</h2>

<p>
In the next example, we will further enhance our programming skills with 
the GTK# library.
</p>

<div class="codehead">buttons.cs</div>
<pre class="code">
using Gtk;
 
class SharpApp : Window
{
    
    public SharpApp() : base("Buttons")
    {
        SetDefaultSize(250, 200);
        SetPosition(WindowPosition.Center);
        
        DeleteEvent += delegate { Application.Quit(); };

        Fixed fix = new Fixed();

        Button btn1 = new Button("Button");
        btn1.Sensitive = false;
        Button btn2 = new Button("Button");
        Button btn3 = new Button(Stock.Close);
        Button btn4 = new Button("Button");
        btn4.SetSizeRequest(80, 40);

        fix.Put(btn1, 20, 30);
        fix.Put(btn2, 100, 30);
        fix.Put(btn3, 20, 80);
        fix.Put(btn4, 100, 80);
        
        Add(fix);
        ShowAll();
    }
    

    public static void Main() 
    {
        Application.Init();
        new SharpApp();
        Application.Run();
    }
}
</pre>

<p>
We show four different buttons on the window. We will see a difference between 
container widgets and child widgets and will change some properties of 
child widgets. 
</p>

<pre class="explanation">
Fixed fix = new Fixed();
</pre>

<p>
<code>Fixed</code> widget is a non visible container widget. 
It's purpose is to contain other child widgets. 
</p>

<pre class="explanation">
Button btn1 = new Button("Button");
</pre>

<p>
A <code>Button</code> is a child widget. Child widgets are placed inside
containers. 
</p>

<pre class="explanation">
btn1.Sensitive = false;
</pre>

<p>
We make this button insensitive. This means, we cannot click on it. 
Graphically the widget is grayed out.
</p>

<pre class="explanation">
 Button btn3 = new Button(Stock.Close);
</pre>

<p>
The third button shows an image inside it's area. The GTK# library
has a built-in stock of images, that we can use. 
</p>

<pre class="explanation">
btn4.SetSizeRequest(80, 40);
</pre>

<p>
Here we change the size of the button. 
</p>


<pre class="explanation">
fix.Put(btn1, 20, 30);
fix.Put(btn2, 100, 30);
...
</pre>

<p>
Here we place button widgets inside fixed container widget. 
</p>

<pre class="explanation">
Add(fix);
</pre>

<p>
We set the <code>Fixed</code> container to be the main container for 
our <code>Window</code> widget. 
</p>


<pre class="explanation">
ShowAll();
</pre>

<p>
We can either call <code>ShowAll()</code> method, or we call <code>Show()</code>
method on each of the widgets. Including containers. 
</p>

<img src="/img/gui/sharpgtk/buttons.png" alt="Buttons">
<div class="figure">Figure: Buttons</div>


<p>
In this chapter, we created first programs in GTK# programming library. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified January 23, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
